<template>
  <l-layout v-if="ready" class="l-tab-page">
    <l-panel style="padding: 0">
      <template #toolLeft>
        <l-query2
          :items="queryItems"
          :formData="queryData"
          :loading="tableLoading"
          @search="handleSearch"
        >
          <template #f_Code>
            <el-input v-model="queryData.f_Code" :placeholder="$t('请输入')" />
          </template>
          <template #f_State>
            <l-select v-model="queryData.f_State" :options="optionsState" />
          </template>
        </l-query2>
      </template>
      <template #toolRight>
        <el-button-group>
          <el-button
            size="mini"
            icon="el-icon-refresh-left"
            @click="handleSearch"
          ></el-button>
        </el-button-group>
        <el-button-group>
          <el-button size="mini" @click="handleLogForm">{{
            $t("实时日志")
          }}</el-button>
        </el-button-group>
      </template>
      <div class="l-rblock">
        <l-table
          :columns="columns"
          :dataSource="tableData"
          :loading="tableLoading"
          :isPage="true"
          :pageTotal="tableTotal"
          :tablePage.sync="tableCurrentPage"
          @loadPageData="turnTablePage"
        >
        </l-table>
      </div>
    </l-panel>

    <!--表单-->
    <l-dialog
      :title="$t('查看实时日志')"
      :visible.sync="formVisible"
      :height="600"
      :width="800"
      @close="handleCloseForm"
      @opened="handleOpenedForm"
    >
      <im-log-form ref="form" />
    </l-dialog>
  </l-layout>
</template>

<script>
const api = window.$api.sass.tenantTask;
import ImLogForm from "./imLogForm.vue";
export default {
  components: {
    ImLogForm,
  },
  data() {
    return {
      tableLoading: false,
      tableData: [],
      tableTotal: 0,
      tablePageSize: 50,
      tableCurrentPage: 1,
      columns: [
        {
          label: "租户",
          prop: "f_Code",
          width: 120,
          align: "left",
          formatter({ cellValue, row }) {
            if (!cellValue) {
              return row.f_TenantId;
            }
            return cellValue;
          },
        },
        {
          label: "任务类型",
          prop: "f_TaskType",
          width: 120,
          align: "left",
          formatter: function ({ cellValue }) {
            switch (cellValue) {
              case 99:
                return "空任务";
              case 1:
                return "同步表结构";
              case 2:
                return "同步数据";
              case 3:
                return "创建账号";
              case 4:
                return "同步菜单";
              case 20:
                return "批量更新";
              case 21:
                return "批量删除";
            }
          },
        },
        {
          label: "时间",
          prop: "f_Time",
          width: 160,
          align: "left",
          dataType: "datetime",
        },
        {
          label: "状态",
          prop: "f_State",
          width: 120,
          align: "left",
          formatter: function ({ cellValue }) {
            switch (cellValue) {
              case 0:
                return "等待";
              case 2:
                return "异常";
              case 1:
                return "正在执行";
            }
          },
        },
        { label: "创建人", prop: "f_UserName", minWidth: 120, align: "left" },
      ],

      // 查询参数
      queryData: {
        f_Code: "",
        f_State: null,
      },

      queryItems: [
        { label: this.$t("租户"), prop: "f_Code" },
        { label: this.$t("状态"), prop: "f_State" },
      ],
      optionsState: [
        { value: 0, label: this.$t("等待") },
        { value: 1, label: this.$t("执行") },
        { value: 2, label: this.$t("异常") },
      ],

      ready: false,

      formVisible: false,
    };
  },
  created() {},
  mounted() {},
  methods: {
    async init() {
      this.ready = false;
      this.tableLoading = true;
      await this.loadTableData();
      this.ready = true;
    },
    async loadTableData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      this.tableLoading = true;
      let queryData = this.$deepClone(this.queryData);
      queryData.rows = this.tablePageSize;
      queryData.page = this.tableCurrentPage;
      queryData.sidx = "f_Time,F_TaskType";

      const data = await this.$awaitWraper(api.getPage(queryData));
      this.tableData = data.rows;
      this.tableTotal = data.records;
      this.tableLoading = false;
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTableData(true);
    },
    handleSearch() {
      this.loadTableData();
    },
    resetForm() {
      this.tableCurrentPage = 1;
      this.columns = [];
      this.tableData = [];
      this.tableTotal = 0;
    },

    //
    handleLogForm() {
      this.formVisible = true;
    },
    handleOpenedForm() {
      this.$refs.form.init();
    },
    handleCloseForm() {
      this.$refs.form.resetForm();
    },
  },
};
</script>